<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <div id="map" style="width: 100%; height: 100vh"></div>
  <div style="position: absolute; top: 0px; left: 0px" id="list"></div>
  <div style="position: absolute; top: 0px; right: 0px">
    <button id="idbtnA">场馆A</button>
    <button id="idbtnB">场馆B</button>
    <button id="id3d">3d</button>
    <button id="center">居中</button>
    <button id="change">取消颜色</button>
  </div>
  <script src="./dist/investMap.min.js"></script>
  <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
  <body>
    <script>
      const vConsole = new VConsole();
      const map = new InvestMap({
        el: document.getElementById("map"),
        env: "prod",
        is3D: false,
        highlightPicker: "none",
        rotateLimit:30
      });
      let test = null;
      document.getElementById("idbtnA").onclick = function () {
        map
          .changeBuliding({
            mallCode: "25023",
            buildingCode: "25023A",
            floorCode:"25023AB02"
          })
          .then((res) => {
            let { floorList } = res;
            const list = document.getElementById("list");
            for (let i = 0; i < floorList.length; i++) {
              let item = floorList[i];
              let div = document.createElement("div");
              div.innerText = item.floorName;
              div.onclick = function () {
                map.changeFloor(item.floorCode);
              };
              list.appendChild(div);
              interacation = map.FMap.getInteracations();
            }
          });
      };

      document.getElementById("idbtnB").onclick = function () {
        map
          .changeBuliding({
            mallCode: "10291",
            buildingCode: "10291A",
          })
          .then((res) => {
            console.log(res);
            let { FMap } = res;
            console.log(FMap);
            let interacation = FMap.getInteracations();
            interacation.enableRotate = false;
          });
      };
      map.on("error", function (e) {
        console.log(e);
      });
      map.on("click", function (e) {

      });
      document.getElementById("change").onclick = function () {
        console.log(test.FID);
        let index = map.boothList.findIndex((item) => item.FID == test.FID);
        if (index !== -1) {
          test.setColor(map.boothList[index].color);
        }

        // map.fillShopColor(map.boothList);
        // let Fmap = map.FMap;
        // var layer,
        //   floor = Fmap.getFloor(Fmap.getLevel());
        // layer = floor.getNodes(fengmap.FMType.MODEL_LAYER);
        // layer[0].children.forEach(item=>{
        //   item.resetColor("red")
        // })
        // console.log(layer);
        // var layer = Fmap.getSpatialLayer();
        // console.log(layer);
      };

    </script>
  </body>
</html>
